<template>
  <div id="app">
    <div class="wrap">
      <lb-header :leftShow="isShow" :title="'篱笆话聊'"></lb-header>
      <main class="con">
        <ul>
          <lb-list v-for="(item,index) in list" :key="index" 
          :name="item.name" 
          :title="item.title" 
          :time="item.time" 
          :con="item.con"></lb-list>
        </ul>
      </main>
      <button class="open" @click="open">发布</button>
    </div>
     <lb-dialog v-show="isShow" @close="closefun"></lb-dialog>
  </div>
</template>

<script>
import lbHeader from '@/components/lbHeader';
import lbDialog from '@/components/lbDialog';
import lbList from '@/components/lbList';
import axios from 'axios'

export default {
  name: 'App',
  components: {
    lbHeader,
    lbDialog,
    lbList
  },
  data(){
    return {
      isShow:false,
      list:[],
    }
  },
  //请求数据
  created() {
    this.getDate()
    // this.bus.$on("close",()=>{
    //   this.isShow = false
    // })
  },
  methods: {
    open(){
      this.isShow = true
    },
    closefun(){
      this.isShow = false
      this.getDate()
    },
    getDate(){
      axios.get('/api/list').then((res)=>{
            // console.log(res)
        if(res.data.code == 1){
          this.list = res.data.data
        }
      })
    }
  },
}
</script>

<style>
*{
  margin:0;
  padding:0;
  list-style:none;
  box-sizing:border-box;
}
html,body,#app{
  width:100%;
  height:100%;
  overflow:hidden;
}
.wrap{
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
}
.con{
  width:100%;
  flex:1;
  overflow:scroll;
}
.open{
  width:100%;
  height:40px;
  background:#ccc;
}
</style>
